<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<div th:fragment="date">
    <style>
        #date {
            width: 260px;
            margin: 10px auto;
            overflow: hidden;
            padding: 5px;
        }

        #data li {
            list-style: none;
            float: left;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        .ny {
            height: 30px;
            color: #dddddc;
            margin-top: 15px;
            font-size: 20px;
            text-align: center;
        }

        .ny div span {
            font-size: 18px;
            cursor: pointer;
            margin: 0 10px 0 10px;
        }

        #date ul {
            font-size: 0;
        }

        .number {
            font-size: 0;
        }

        #date ul li,
        .number span {
            width: 37px;
            height: 26px;
            line-height: 22px;
            color: #fff;
            text-align: center;
            display: inline-block;
            font-size: 10px;
        }

        .number span.color {
            color: #8d8c89;
        }

        .number span.active {
            background: #0078d7;
        }
    </style>
    <div id="date">

        <div class="ny">
            <div style="float: left;"><span><i class="myIcon">&#xe626;</i></span></div>
            <span>2019年9月</span>
            <div style="float: right;"><span><i class="myIcon">&#xe625;</i></span></div>
        </div>
        <ul>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
        <div class="number">
<!--            <span class="color">1</span>-->
<!--            <span class="active">2</span>-->
<!--            <span>3</span>-->
<!--            ...-->
        </div>
    </div>
    <script>
          var  number = document.querySelector('.number'),
            btns = document.querySelectorAll('.ny div'),
            strong = document.querySelector('.ny > span');

        //获取到某个月的天数（最后一天的日期值）
        //我要做的事情是获取最后一天的值，
        function getEndDay(year, month) {	//获取哪个月，就传哪个数字
            //这个方法只需要返回一个数字就够了
            return new Date(year, month, 0).getDate();
        }

        //获取到某个月第一天是周几（星期数）
        function getFirstWeek(year, month) {	//获取哪个月，就传哪个数字
            return new Date(year, month - 1, 1).getDay();
        }


        //日历主体功能
        function setDate(d) {
            var lastEndDay = getEndDay(d.getFullYear(), d.getMonth());	//获取到上一个月的最后一天
            var curEndDay = getEndDay(d.getFullYear(), d.getMonth() + 1);//获取到当前用的最后一天（因为getMonth取到的值比实际小1，所以要加1）
            var week = getFirstWeek(d.getFullYear(), d.getMonth() + 1);


            var curDay = 1;	//日期的起始值
            var str = '';		//日期的结构
            var endNum = week - 1;	//上个月所占格子的数量

            //如果当前月的第一天是周一，上个月就不会显示。为了显示，让endNum的值=7即可
            if (endNum == 0) {
                endNum = 7;
            }

            //如果某个月的第一天是周日，week的值就是0，endNum就是个负数，就会出问题
            if (endNum < 0) {
                endNum = 6;
            }
            for (var i = 0; i < 42; i++) {
                if (i < endNum) {
                    //这个条件成立，说明这里放的是上个月的日期
                    str = '<span class="color">' + (lastEndDay--) + '</span>' + str;
                } else if (i >= endNum + curEndDay) {
                    //这个条件成立，说明这里放的是下个月的日期
                    str += '<span class="color">' + (curDay++) + '</span>';
                } else {
                    //这个条件成立，说明这里放的是这个月的日期
                    var cl = new Date().getDate() == i - endNum + 1 ? 'active' : ''

                    if (d.getFullYear() != new Date().getFullYear() || d.getMonth() != new Date().getMonth()) {
                        cl = '';
                    }

                    str += '<span class="' + cl + '">' + (i - endNum + 1) + '</span>';
                }
            }

            number.innerHTML = str;

            strong.innerHTML = d.getFullYear() + '年' + (d.getMonth() + 1) + '月';
        }

        var d = new Date();
        setDate(d);

        //点击上个月
        btns[0].onclick = function () {
            d.setMonth(d.getMonth() - 1);
            setDate(d);
        };

        //点击下个月
        btns[1].onclick = function () {
            d.setMonth(d.getMonth() + 1);
            setDate(d);
        };
    </script>
</div>
</body>
</html>